<template>
  <div class="applicant_body" v-if="applicantPersonForm.id">
    <div v-if="!isEdit">
      <div v-if="type == Tp_applicantValue.CITIZEN">

        <a-col :xxl="8" :lg="8" :sm="24" class="applicant_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="applicant_div_label">类型：</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="applicant_div_content">
            {{ typeLabel(applicantPersonForm.type) ? typeLabel(applicantPersonForm.type) : '暂无' }}
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="applicant_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="applicant_div_label">名称：</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="applicant_div_content">
            {{ applicantPersonForm.name ? applicantPersonForm.name : '暂无' }}
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="applicant_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="applicant_div_label">证件类型:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="applicant_div_content">{{ cardTypeLabel(applicantPersonForm.cardtype) }}</a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="applicant_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="applicant_div_label">证件号:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="applicant_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ applicantPersonForm.cardno }}</span>
                </template>
                {{ applicantPersonForm.cardno }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="applicant_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="applicant_div_label">性别:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="applicant_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ genderLabel(applicantPersonForm.gender) ? genderLabel(applicantPersonForm.gender) : '暂无' }}</span>
                </template>
                {{ genderLabel(applicantPersonForm.gender) ? genderLabel(applicantPersonForm.gender) : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="applicant_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="applicant_div_label">民族:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="applicant_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ nationLabel(applicantPersonForm.nation) ? nationLabel(applicantPersonForm.nation) : '暂无' }}</span>
                </template>
                {{ nationLabel(applicantPersonForm.nation) ? nationLabel(applicantPersonForm.nation) : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="applicant_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="applicant_div_label">联系地址:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="applicant_div_content" >
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ applicantPersonForm.addr ? applicantPersonForm.addr : '暂无' }}</span>
                </template>
                {{ applicantPersonForm.addr ? applicantPersonForm.addr : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="applicant_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="applicant_div_label">联系号码:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="applicant_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ applicantPersonForm.tel ? applicantPersonForm.tel : '暂无' }}</span>
                </template>
                {{ applicantPersonForm.tel ? applicantPersonForm.tel : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="applicant_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="applicant_div_label">邮政编码:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="applicant_div_content">{{ applicantPersonForm.postcode ? applicantPersonForm.postcode : '暂无' }}</a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="applicant_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="applicant_div_label">是否代表人:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="applicant_div_content">{{ applicantPersonForm.isrepr == 3200 ? '是' : '否' }}</a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="applicant_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="applicant_div_label">工作单位:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="applicant_div_content" >
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ applicantPersonForm.unit ? applicantPersonForm.unit : '暂无' }}</span>
                </template>
                {{ applicantPersonForm.unit ? applicantPersonForm.unit : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="24" :lg="24" :sm="24" class="applicant_file_div">
          <div class="applicant_div_label">身份证明:</div>
          <div v-if="applicantPersonForm.filecardList && applicantPersonForm.filecardList.length" style="width: 100%">
            <a v-for="item in applicantPersonForm.filecardList" :key="item.id" class="file-css">
              <div style="width: 60%; display: flex; align-items: center">
                <span :title="item.filename" style="width: 100%;display: flex; align-items: center">
                  <span @click="previewFile(item)" class="beyond_hiding">
                    <a-icon type="folder" theme="filled" />
                    {{ item.filename }}
                  </span>
                </span>
              </div>
              <div style="width: 40%; display: flex; align-items: center;margin-right: 20px;">
                <div class="button_flex" @click="download(item)">
                  <a-icon type="download" style="margin-right: 8px" />
                  <a class="download_div">下载</a>
                </div>
                <a-divider type="vertical" />
                <a-popconfirm title="确定删除吗？" @confirm="() => deleteApplicantFile(applicantPersonForm, item, 0)">
                  <div class="button_flex">
                    <a-icon type="delete" style="margin-right: 8px" />
                    <a class="download_div">删除</a>
                  </div>
                </a-popconfirm>
              </div>
            </a>
          </div>
          <div v-else class="applicant_div_content">未上传附件</div>
        </a-col>
      </div>
      <div v-else-if="type == Tp_applicantValue.UNIT">

        <a-col :xxl="8" :lg="8" :sm="24" class="applicant_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="applicant_div_label">类型：</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="applicant_div_content">
            {{ typeLabel(applicantPersonForm.type) ? typeLabel(applicantPersonForm.type) : '暂无' }}
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="applicant_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="applicant_div_label">名称：</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="applicant_div_content">{{ applicantPersonForm.name ? applicantPersonForm.name : '暂无' }}</a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="applicant_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="applicant_div_label">信用代码:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="applicant_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ applicantPersonForm.cardno ? applicantPersonForm.cardno : '暂无' }}</span>
                </template>
                {{ applicantPersonForm.cardno ? applicantPersonForm.cardno : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="applicant_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="applicant_div_label">联系地址:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="applicant_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ applicantPersonForm.addr ? applicantPersonForm.addr : '暂无' }}</span>
                </template>
                {{ applicantPersonForm.addr ? applicantPersonForm.addr : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="applicant_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="applicant_div_label">联系号码:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="applicant_div_content">{{ applicantPersonForm.tel ? applicantPersonForm.tel : '暂无' }}</a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="applicant_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="applicant_div_label">邮政编码:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="applicant_div_content">{{ applicantPersonForm.postcode ? applicantPersonForm.postcode : '暂无' }}</a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="applicant_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="applicant_div_label">法人/代表人：</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="applicant_div_content">{{ applicantPersonForm.manager ? applicantPersonForm.manager : '暂无' }}</a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="applicant_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="applicant_div_label">工作：</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="applicant_div_content">{{ applicantPersonForm.job ? applicantPersonForm.job : '暂无' }}</a-col>
        </a-col>

        <a-col :xxl="24" :lg="24" :sm="24" class="applicant_file_div">
          <div class="applicant_div_label">身份证明书:</div>
          <div v-if="applicantPersonForm.doccardList && applicantPersonForm.doccardList.length" style="width: 100%">
            <a v-for="item in applicantPersonForm.doccardList" :key="item.id" class="file-css">
              <div style="width: 60%; display: flex; align-items: center">
                <span :title="item.filename" style="width: 100%">
                  <span @click="previewFile(item)" class="beyond_hiding">
                    <a-icon type="folder" theme="filled" />
                    {{ item.filename }}
                  </span>
                </span>
              </div>
              <div style="width: 40%; display: flex; align-items: center">
                <div class="button_flex" @click="download(item)">
                  <a-icon type="download" style="margin-right: 8px" />
                  <a class="download_div">下载</a>
                </div>
                <a-divider type="vertical" />
                <a-popconfirm title="确定删除吗？" @confirm="() => deleteApplicantFile(applicantPersonForm, item, 1)">
                  <div class="button_flex">
                    <a-icon type="delete" style="margin-right: 8px" />
                    <a class="download_div">删除</a>
                  </div>
                </a-popconfirm>
              </div>
            </a>
          </div>
          <div v-else class="applicant_div_content">未上传附件</div>
        </a-col>
      </div>
    </div>
    <a-form-model
      v-else
      ref="applicantPersonFormRef"
      :rules="rules"
      style="width: 100%"
      labelAlign="left"
      :model="applicantPersonForm"
    >
      <a-col :xxl="12" :lg="12" :sm="24">
        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="申请人类型" prop="type" has-feedback>
          <a-select allow-clear placeholder="请选择申请人类型" v-model="applicantPersonForm.type" @change="changePersonType">
            <a-select-option v-for="item in Tp_applicant" :key="item.value">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24">
        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="applicantPersonForm.type == Tp_applicantValue.CITIZEN ? '姓名':'名称'" prop="name" has-feedback>
          <a-input v-model="applicantPersonForm.name" allow-clear :maxLength="125" :placeholder="applicantPersonForm.type == Tp_applicantValue.CITIZEN ? '请输入姓名':'请输入名称'" />
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24" v-if="applicantPersonForm.type == Tp_applicantValue.CITIZEN">
        <a-form-model-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          label="证件类型"
          prop="cardtype"
          has-feedback
        >
          <a-select allow-clear placeholder="请选择证件类型" v-model="applicantPersonForm.cardtype">
            <a-select-option v-for="item in Tp_card" :key="item.id">
              {{ item.description }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24">
        <a-form-model-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :label="applicantPersonForm.type == Tp_applicantValue.UNIT ? '统一信用代码':'证件号'"
          prop="cardno">
          <a-input
            v-model="applicantPersonForm.cardno"
            allow-clear
            :maxLength="125"
            :placeholder="applicantPersonForm.type == Tp_applicantValue.UNIT ? '请输入统一信用代码':'请输入证件号'" />
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24" v-if="applicantPersonForm.type == Tp_applicantValue.CITIZEN">
        <a-form-model-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          label="性别"
          prop="gender"
        >
          <a-select allow-clear placeholder="请选择性别" v-model="applicantPersonForm.gender">
            <a-select-option v-for="item in Tp_gender" :key="item.id">
              {{ item.description }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>

      <!-- 公民显示字段 -->
      <a-col :xxl="12" :lg="12" :sm="24" v-if="applicantPersonForm.type == Tp_applicantValue.CITIZEN">
        <a-form-model-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          label="民族"
          prop="nation"
        >
          <a-select allow-clear placeholder="请选择民族" v-model="applicantPersonForm.nation">
            <a-select-option v-for="item in Tp_nation" :key="item.id">
              {{ item.description }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24" v-if="applicantPersonForm.type == Tp_applicantValue.CITIZEN">
        <a-form-model-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          label="出生年月"
          prop="birthym"
        >
          <a-date-picker
            v-model="applicantPersonForm.birthym"
            placeholder="请选择出生年月"
            format="YYYY-MM-DD"
            :allowClear="true"
          />
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24">
        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="联系电话" prop="tel">
          <a-input v-model="applicantPersonForm.tel" allow-clear :maxLength="125" placeholder="请输入联系电话" />
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24">
        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="联系地址" prop="addr">
          <a-input v-model="applicantPersonForm.addr" allow-clear :maxLength="125" placeholder="请输入联系地址" />
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24">
        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="邮政编码" prop="postcode">
          <a-input v-model="applicantPersonForm.postcode" allow-clear placeholder="请输入邮政编码" />
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24" v-if="applicantPersonForm.type == Tp_applicantValue.CITIZEN">
        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="是否代表人" prop="isrepr">
          <a-select allow-clear placeholder="请选择是否代表人" v-model="applicantPersonForm.isrepr">
            <a-select-option :value="3200"> 是 </a-select-option>
            <a-select-option :value="3201"> 否 </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24" v-if="applicantPersonForm.type == Tp_applicantValue.CITIZEN">
        <a-form-model-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          label="工作单位"
          prop="unit"
        >
          <a-input v-model="applicantPersonForm.unit" allow-clear placeholder="请输入工作单位" />
        </a-form-model-item>
      </a-col>

      <!-- 法人显示字段 -->
      <a-col :xxl="12" :lg="12" :sm="24" v-if="applicantPersonForm.type == Tp_applicantValue.UNIT">
        <a-form-model-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          label="法定代表人"
          prop="manager"
          has-feedback
        >
          <a-input v-model="applicantPersonForm.manager" allow-clear placeholder="请输入法定代表人" />
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24" v-if="applicantPersonForm.type == Tp_applicantValue.UNIT">
        <a-form-model-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          label="工作"
          prop="job"
        >
          <a-input v-model="applicantPersonForm.job" allow-clear placeholder="请输入工作" />
        </a-form-model-item>
      </a-col>

      <a-col :xxl="24" :lg="24" :sm="24" v-if="applicantPersonForm.type == Tp_applicantValue.CITIZEN">
        <a-form-model-item
          label="身份证明"
          prop="filecard"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 12 }"
        >
          <!-- :customRequest="(file) => uploadFile(file, 1)"
            :remove="(file) => removeFile(file, 1)"
            :before-upload="(file) => beforeUpload(file, 1)" -->
          <a-upload
            :accept="acceptFileType"
            :file-list="filecardList"
            :remove="(file) => removeFile(file, 0)"
            name="file"
            :multiple="true"
          >
            <a @click.stop="uploadFile(0)">
              <a-icon type="upload" style="margin-right: 10px"></a-icon>
              <span>上传</span>
            </a>
          </a-upload>
        </a-form-model-item>
      </a-col>

      <a-col :xxl="24" :lg="24" :sm="24" v-if="applicantPersonForm.type == Tp_applicantValue.UNIT">
        <a-form-model-item
          label="身份证明书"
          prop="doccard"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 12 }"
        >
          <!-- :customRequest="(file) => uploadFile(file, 2)"
            :remove="(file) => removeFile(file, 2)"
            :before-upload="(file) => beforeUpload(file, 2)" -->
          <a-upload
            :accept="acceptFileType"
            :file-list="doccardList"
            :remove="(file) => removeFile(file, 1)"
            name="file"
            :multiple="true"
          >
            <a @click.stop="uploadFile(1)">
              <a-icon type="upload" style="margin-right: 10px"></a-icon>
              <span>上传</span>
            </a>
          </a-upload>
        </a-form-model-item>
      </a-col>
    </a-form-model>

    <div class="applicant_operate_div" v-if="applicantPersonForm">
      <div v-if="!isEdit" style="font-size: 16px;color:#40a9ff" @click="() => { isEdit = true}">
        <a-icon type="edit" style="margin-right: 5px;" />
        <span>编辑</span>
      </div>
      <div v-else>
        <span @click="onSubmit" style="margin-right: 10px;" >
          <a-icon type="save" style="margin-right: 5px;" />
          <span>保存</span>
        </span>
        <span @click="cancelSubmit">
          <a-icon type="rollback" style="margin-right: 5px;" />
          <span>取消</span>
        </span>
      </div>
    </div>
    <MultiUploadBasic ref="multiUploadBasic" @importFileFun="importFileFun"></MultiUploadBasic>
  </div>
</template>

  <script>
  import { minioUpload, minioRemove, minioUploadMore } from '@/api/base/file'
  import { Tp_agentList, Tp_agentValue } from '@/enumeration/Tp_agent'
  import { queryEnumeration } from '@/api/accept/enum_load'
  import { FILETYPE, FILESIZE } from '@/store/mutation-types'
  import { Tp_procmaterialValue } from '@/enumeration/Tp_procmaterial'
  import { Tp_proctypeValue } from '@/enumeration/Tp_proctype'
  import { APP_USER } from '@/store/mutation-types.js'
  import storage from 'store'
  import { Tp_applicantList, Tp_applicantValue } from '@/enumeration/Tp_applicant'
  import { getApplicantWithGroup, deleteApplicantFile, saveApplicant } from '@/api/accept/apl_applicant'
  import { kkfilePreview, downloadFileWithUrl } from '@/utils/util.js'
  export default {
    props: {
      applyid: {
        // 申请id
        type: String,
        required: true
      }
    },
    data () {
      return {
        labelCol: { span: 8 }, // label宽
        wrapperCol: { span: 12 }, // 组件宽
        loading: false, // 按钮显示
        isModel: false, // 模态框显示
        Tp_agentList: Tp_agentList,
        Tp_agentValue: Tp_agentValue,
        Tp_card: [], // 证件类型
        Tp_gender: [], // 性别
        Tp_nation: [], // 民族
        applicantPersonForm: {
          id: undefined, // id
          applyid: undefined, // applyid
          type: undefined, // 代理人类型
          name: undefined, // 名称
          cardtype: undefined, // 证件类型
          cardno: undefined, // 证件号
          gender: undefined, // 性别
          nation: undefined, // 民族
          addr: undefined, // 送达地址（住址）
          unit: undefined, // 工作单位（律所名称）
          tel: undefined, // 电话
          isrepr: undefined, // 是否代表人
          postcode: undefined, // 邮政编码
          filecard: undefined, // 身份证明
          doccard: undefined, // 身份证明书
          fileentrust: undefined // 委托书
        },
        filecardList: [], // 身份证明文件
        doccardList: [], // 身份证明书文件
        fileentrustList: [], // 委托书文件

        labelTitle: '',
        acceptFileType: FILETYPE,
        operateType: undefined,
        Tp_procmaterialValue: Tp_procmaterialValue,
        Tp_proctypeValue: Tp_proctypeValue,
        currentUser: storage.get(APP_USER),

        type: null,
        Tp_applicantValue: Tp_applicantValue,
        Tp_applicant: Tp_applicantList,

        isEdit: false,
        applicantPersonFormClone: undefined,
        deleteFileList: [], // 删除的文件列表

        /**
         * 添加表单验证规则
         */
        rules: {
          type: [{ required: true, message: '请选择类型', trigger: 'change' }],
          name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
          cardtype: [{ required: true, message: '请输入证件类型', trigger: 'change' }],
          cardno: [{ required: true, message: '请输入证件号', trigger: 'blur' }],
          tel: [{ validator: this.checkTel }],
          postcode: [{ validator: this.checkPostcode }],
          addr: [{ required: true, message: '请输入地址', trigger: 'blur' }],
          isrepr: [{ required: true, message: '请选择是否代表人', trigger: 'change' }]
        },
      }
    },
    components: {
      MultiUploadBasic: () => import('@/views/materials/multiUpload/MultiUploadBasic.vue')
    },
    async created () {
      this.queryEnumeration('Tp_card', (val) => {
        this.Tp_card = val
      })
      this.queryEnumeration('Tp_gender', (val) => {
        this.Tp_gender = val
      })
      this.queryEnumeration('Tp_nation', (val) => {
        this.Tp_nation = val
      })
    },
    methods: {

      resetFileList () {
        this.filecardList = [] // 身份证明文件
        this.doccardList = [] // 身份证明书文件
      },
      init (editVal, editForm, type) {
        this.type = type
        if (editVal) {
          this.resetFileList()
          this.applicantPersonForm = Object.assign({}, this.applicantPersonForm, editForm)
          this.applicantPersonFormClone = JSON.parse(JSON.stringify(this.applicantPersonForm))
          if (editForm.filecardList != null && editForm.filecardList != undefined) {
            editForm.filecardList.forEach(item => {
              const file = {
                uid: item.id,
                name: item.filename,
                status: 'done',
                url: item.path,
                flag: item.id
              }
              this.filecardList.push(file)
            })
          }
          if (editForm.doccardList != null && editForm.doccardList != undefined) {
            editForm.doccardList.forEach(item => {
              const file = {
                uid: item.id,
                name: item.filename,
                status: 'done',
                url: item.path,
                flag: item.id
              }
              this.doccardList.push(file)
            })
          }
        }
        if (this.$refs.applicantPersonFormRef) {
          this.$refs.applicantPersonFormRef.clearValidate()
        }
      },
      async queryEnumeration (val, callback) {
        await queryEnumeration({ 'enName': val }).then((res) => {
          if (res.code !== 0) {
            console.log('查询枚举值错误')
          } else {
            callback(res.data)
          }
        })
      },
      typeLabel (val) {
        for (const key in this.Tp_applicant) {
          if (this.Tp_applicant[key].value == val) {
            return this.Tp_applicant[key].name
          }
        }
        return val
      },
      cardTypeLabel (val) {
        for (const key in this.Tp_card) {
          if (this.Tp_card[key].id == val) {
            return this.Tp_card[key].description
          }
        }
        return val
      },
      genderLabel (val) {
        for (const key in this.Tp_gender) {
          if (this.Tp_gender[key].id == val) {
            return this.Tp_gender[key].description
          }
        }
        return val
      },
      nationLabel (val) {
        for (const key in this.Tp_nation) {
          if (this.Tp_nation[key].id == val) {
            return this.Tp_nation[key].description
          }
        }
        return val
      },
      // 预览文件
      previewFile (record) {
        window.open(kkfilePreview(record.path))
      },
      download (record) {
        if (record && record.path) {
          downloadFileWithUrl(record.path, record.filename)
        }
      },
      // 上传附件
      uploadApplicantFile () {
        if (this.type == Tp_applicantValue.CITIZEN) {
          this.operateType = 0
        } else {
          this.operateType = 1
        }
        this.$refs.multiUploadBasic.importVisible = true
      },

      removeFile (file, type) {
        if (type === 0) {
          this.filecardList = this.filecardList.filter((item) => item.uid !== file.uid)
        } else if (type === 1) {
          this.doccardList = this.doccardList.filter((item) => item.uid !== file.uid)
        }
        this.deleteFileList.push(file.uid)
      },
      minioRemove (fileId) {
        minioRemove({ 'fileid': fileId }).then((res) => {
          console.log('res', res)
          if (res.code !== 0) {
            console.log('删除文件失败', res)
          } else {
            console.log('删除文件成功', fileId)
          }
        })
      },
      // 上传附件
      uploadFile (operateType) {
        // this.selectData = record
        this.operateType = operateType
        this.$refs.multiUploadBasic.importVisible = true
      },

      /**
       ** 确定保存导入数据
      */
      importFileFun (importFileList) {
        console.log('importFileList', importFileList)
        const files = []
        importFileList.forEach(item => {
          files.push(item)
        })
        this.$refs.multiUploadBasic.loading = true
        minioUploadMore(files)
          .then(res => {
            this.$refs.multiUploadBasic.loading = false
            if (res.code == 0) {
              const attachs = res.data
              attachs.forEach((attach) => {
                const file = {
                  uid: attach.id,
                  name: attach.filename,
                  status: 'done',
                  url: attach.url,
                  flag: attach.id
                }
                if (this.operateType === 0) {
                  this.filecardList.push(file)
                } else {
                  this.doccardList.push(file)
                }
              })
              this.$message.success('上传成功')
              this.$refs.multiUploadBasic.handleCancel()
            } else {
              this.$message.success('上传失败')
              this.$refs.multiUploadBasic.handleCancel()
            }
          })
          .finally(() => {
            this.$refs.multiUploadBasic.loading = false
          })
      },

      cancelSubmit () {
      this.applicantPersonForm = this.applicantPersonFormClone
      this.isEdit = false
    },
    /**
     * 提交表单
     */
    onSubmit () {
      const _this = this
      // copyForm. = unitTypeList.filter
      this.$refs.applicantPersonFormRef.validate((valid) => {
        _this.loading = true
        if (valid) {
          if (_this.filecardList != null && _this.filecardList.length > 0) {
            const uploadFile = []
            _this.filecardList.forEach((item) => {
              uploadFile.push(item.uid)
            })
            _this.applicantPersonForm.filecard = uploadFile.join(',')
          } else {
            _this.applicantPersonForm.filecard = ''
          }
          if (_this.doccardList != null && _this.doccardList.length > 0) {
            const uploadFile = []
            _this.doccardList.forEach((item) => {
              uploadFile.push(item.uid)
            })
            _this.applicantPersonForm.doccard = uploadFile.join(',')
          } else {
            _this.applicantPersonForm.doccard = ''
          }
          // this.applicantPersonForm.id = nanoid();
          if (this.applicantPersonForm.birthym) {
            if (this.applicantPersonForm.birthym?.format) {
              this.applicantPersonForm.birthym = this.applicantPersonForm.birthym.format('YYYY-MM-DD')
            }
          }
          // 通过类型来重置部分值
          if (this.applicantPersonForm.type == Tp_applicantValue.CITIZEN) {
            this.applicantPersonForm.manager = undefined
            this.applicantPersonForm.job = undefined
            this.applicantPersonForm.doccardList = []
            this.applicantPersonForm.doccard = undefined
          } else {
            this.applicantPersonForm.nation = undefined
            this.applicantPersonForm.cardtype = undefined
            this.applicantPersonForm.birthym = undefined
            this.applicantPersonForm.gender = undefined
            this.applicantPersonForm.unit = undefined
            this.applicantPersonForm.filecardList = []
            this.applicantPersonForm.filecard = undefined
          }
          saveApplicant(this.applicantPersonForm).then((res) => {
            _this.loading = false
            if (res.code !== 0) {
              _this.$message.error('第三人保存失败')
            } else {
              _this.$message.success('保存成功')
              if (this.deleteFileList && this.deleteFileList.length > 0) {
                this.deleteFileList.forEach((fileId) => {
                  this.minioRemove(fileId)
                })
              }
              _this.$emit('requery')
              this.isEdit = false
            }
          })
        } else {
          _this.loading = false
          // 加延时器的目的是为了vue实例更新未完成，我们可能获取DOM失败的问题
          // 利用原生js的方式，获取所有失败的类名，获得一个数组，取第一个元素获取焦点
          setTimeout(() => {
            const isError = document.getElementsByClassName('has-error')
            const input = isError[0].querySelector('input')
            // console.log(input)
            if (input !== null && input !== 'undefind' && input !== '') {
              isError[0].querySelector('input').focus()
                ? isError[0].querySelector('input').focus()
                : isError[0].querySelector('input').click()
            } else {
              isError[0].querySelector('textarea').focus()
            }
          }, 10)
          return false
        }
      })
    },
    changePersonType () {
      if (this.$refs.applicantPersonFormRef) {
        this.$refs.applicantPersonFormRef.clearValidate()
      }
    },
    deleteApplicantFile (record, file, type) {
      if (type == null || type == undefined) {
        this.$message.error('操作类型为空')
      }
      deleteApplicantFile({ id: record.id, type: type, attachid: file.id }).then(res => {
        console.log('deleteApplicantFile', res.data)
        if (res.code == 0) {
          this.$emit('requery')
        } else {
          this.$message.success('删除失败')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .applicant_body {
    padding: 16px 32px;
    border: 1px solid  rgb(0, 114, 198);
    background-color: #f3f6fb;
    display: inline-block;
    ::v-deep .ant-form label {
      font-size: 16px;
    }
    ::v-deep .ant-form-item-label {
      font-size: 16px;
    }
  }
  .applicant_div {
    margin: 10px 0px;
    display: flex;
    align-items: center;
  }
  .applicant_file_div {
    margin: 10px 0px;
    display: flex;
  }
  .applicant_div_label {
    font-size: 16px;
    font-weight: bold;
    width: 120px;
  }
  .applicant_div_content {
    // display: flex;
    // align-items: center;
    font-size: 16px;

    width: 60%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
  }

  .file-css {
    display: flex;
    width: 100%;
    max-width: 650px;
  }
  .applicant_operate_div {
    display: flex;
    width: 100%;
    align-items: flex-end;
    margin-right: 20px;
    flex-direction: row-reverse;
    color: #40a9ff;
    cursor: pointer;
    padding-bottom: 20px;
  }
</style>
